<template>
	<view class="fabustyle">
		<input type="text" class="fabuinput" v-model="title" />
		<button @click="fabuFn">发布</button>
	</view>
	<view>
		进行中{{renum}}
	</view>
	<!-- <view>
		<view v-for="(item,index) in todosArr" key="itrm.id" class="todostyle">
			<label>
				<checkbox :checked="item.completed" @click="handleCheck(index)" />
			</label>
			<view class="titlestyle">
				{{item.title}}
			</view>
			<button @click="delFn(index)" class="shanchustyle">删除</button>
		</view>
	</view> -->
	<mytodos v-for="item,index in todosArr" :key="item.id" :title="item.title" :completed="item.completed"
		@handleChange='handleCheck(index)' @delFn="delFn(index)"></mytodos>
</template>

<script>
	import {
		computed
	} from 'vue';

	export default {
		data() {
			return {
				title: "",
				todosArr: []
			}
		},
		computed: {
			renum() {
				let n = this.todosArr.filter(v => v.completed == false).length
				return n
			}
		},
		onLoad() {
			const localTodos = uni.getStorageSync("todos");
			if (localTodos && localTodos.length > 0) {
				this.todosArr = localTodos;
			} else {
				const defaultTodos = [{
						id: 1,
						title: "aaa",
						completed: false
					},
					{
						id: 2,
						title: "bbb",
						flag: true
					}
				];
				this.todosArr = defaultTodos;
				uni.setStorageSync("todos", defaultTodos);
			}
		},
		methods: {
			fabuFn() {
				let NewTodos = {
					id: Date.now(),
					title: this.title,
					completed: false
				}
				this.todosArr.push(NewTodos)
				uni.setStorageSync("todos", this.todosArr)
				this.title = ""
			},
			delFn(index) {
				this.todosArr.splice(index, 1)
				uni.setStorageSync("todos", this.todosArr)
			},
			handleCheck(index) {
				this.todosArr[index].completed = !this.todosArr[index].completed;
				uni.setStorageSync("todos", this.todosArr);
			}
		}
	}
</script>

<style>
	.fabuinput {
		height: 100rpx;
		width: 580rpx;
		border: 2rpx solid black;
	}

	.fabustyle {
		display: flex;
		justify-content: space-between;
	}

	/* .todostyle {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.titlestyle {
		width: 520rpx;
	} */
</style>